import React from 'react';
import {Table, Button, Spin, Card} from 'antd';
import {TABLE} from '../../constants';
import PropTypes from 'prop-types';
import routes from '../routes';
import {getStatisDetails} from '../api';
import {injectIntl} from '../intl';
class SigninStatistics extends React.PureComponent {
    state = {
        isFetching: false,
        details: [],
    }
    componentDidMount() {
        this.getDetailInfo();
    }
    getDetailInfo = () => {
        this.setState({isFetching: true});
        getStatisDetails()
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        details: res.data,
                    });
                else
                    this.setState(({
                        isFetching: false
                    }));
            });
    }
    onCancel = () => {
        this.props.history.push(routes.query.url());
    }
    render() {
        const {details} = this.state;
        const {formatMessage} = this.props.intl;
        const colums = [
            {
                title: formatMessage({
                    id: 'signinStatistics.column.code',
                    defaultMessage: '栏目编号'
                }),
                dataIndex: 'code',
            }, {
                title: formatMessage({
                    id: 'signinStatistics.column.name',
                    defaultMessage: '栏目名称'
                }),
                dataIndex: 'name'
            }, {
                title: formatMessage({
                    id: 'signinStatistics.column.total',
                    defaultMessage: '总数'
                }),
                dataIndex: 'total'
            }, {
                title: formatMessage({
                    id: 'signinStatistics.column.noSign',
                    defaultMessage: '未签收数'
                }),
                dataIndex: 'noSign',
            }, {
                title: formatMessage({
                    id: 'signinStatistics.column.noReply',
                    defaultMessage: '未回复数'
                }),
                dataIndex: 'noReply',
            }
        ];
        return (
            <div>
                <Spin spinning={this.state.isFetching}>
                    <Card
                        title={formatMessage({
                            id: 'signinStatistics.card.common',
                            defaultMessage: '签收回复统计清单'
                        })}>
                        <Table
                            className="white-space-nowrap"
                            rowKey="id"
                            columns={colums}
                            pagination={false}
                            dataSource={details}
                            {...TABLE} />
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Button type="primary" onClick={this.onCancel}>{formatMessage({
                        id: 'signinStatistics.operation.onCancel',
                        defaultMessage: '返回'
                    })}</Button>
                </div>
            </div>
        );
    }
}

SigninStatistics.propTypes = {
    history: PropTypes.object,
    id: PropTypes.string,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import {
    tableSearch,
} from '../actions';
const mapDispatchToProps = (dispatch, props) => ({
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(null, mapDispatchToProps)(injectIntl(SigninStatistics));
